<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>.sync修饰符</title>
    <script src="../public/vue2.7.14-dev.js"></script>
    <style>
        .child{
            border: 3px solid green;
        }
        #app{

            border: 3px solid red;
            padding: 10px;
        }
    </style>
</head>
<body>
    <!-- .sync是一个语法糖。是父组件监听子组件更新某个props的请求的缩写语法。 -->
   <div id="app">
    App 我现在有{{total}}
    <hr>
    <!-- 爸爸监听儿子 v-on:update:money -->
    <!-- $event[拿到儿子的事件（参数值）]===子组件的template的 money -100 -->
<!-- 原理：儿子不能自己改，必须通知爸爸修改 -->
    <!-- <child :money="total" v-on:update:money="total=$event" /> -->
    <!-- 下面这个是简化形式： -->
    <child :money.sync="total"/>
   </div>

    <script>
        Vue.component('child',{
            template:`
            <div class="child">
                {{money}}
                <!-- 点击触发$emit:'update:money',运行表达式 money - 100 -->
            <button @click="$emit('update:money',money-100)">
                花钱
            </button>    
                </div>
            `,
            props:['money']
        })

        new Vue({
            el:"#app",
            data(){
                return {
                    total:10000
                }
            }
        })
    </script>

    <!-- 
示例代码如下：（父组件.vue）

<comp :foo.sync="bar"></comp>
会被扩展为：

<comp :foo="bar" @update:foo="val => bar = val"></comp>
当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件：

this.$emit('update:foo', newValue)
     -->
</body>
</html>